<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>
<!--如果不指定layout，其location的位置，将会根据其定义先后顺序为0，1，2 -->
<body>
    <canvas id="c" width="1200" height="900"></canvas>
    <script>
        const canvas = document.getElementById("c");
        const gl = canvas.getContext("webgl2"); // 必须 webgl2
        if (!gl) alert("WebGL2 not supported");

        /* ---------- 着色器源码，layout中location的值 ---------- */
        const vs = `#version 300 es
layout(location = 1) in vec3 a_color;
layout(location = 0) in vec3 a_position;
layout(location = 2) in float a_size;
out vec3 v_color;
void main() {
    gl_Position = vec4(a_position, 1.0);
    gl_PointSize = a_size;
    v_color = a_color;
}`;

        const fs = `#version 300 es
precision mediump float;
in  vec3 v_color;
out vec4 fragColor;
void main() {
    fragColor = vec4(v_color, 1.0);
}`;

        /* ---------- 工具：编译 & 链接着色器 ---------- */
        function compile(type, src) {
            const s = gl.createShader(type);
            gl.shaderSource(s, src);
            gl.compileShader(s);
            if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
                throw gl.getShaderInfoLog(s);
            return s;
        }
        function initWebGL(vs, fs, gl){
    
            const prog = gl.createProgram();
            gl.attachShader(prog, compile(gl.VERTEX_SHADER, vs));
            gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, fs));
            gl.linkProgram(prog);
            if (!gl.getProgramParameter(prog, gl.LINK_STATUS))
                throw gl.getProgramInfoLog(prog);

            gl.useProgram(prog);
                    const glb = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, glb);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
                -0.5, -0.5, 0,
                 0.5, -0.5, 0,
                 0,    0.5, 0
            ]), gl.STATIC_DRAW);
            /* ---------- 随机生成 3 个点 ---------- */
            const N = 100; // 点数
            const data = new Float32Array(N * (3 + 3 + 1)); // xyz + rgb + size
            for (let i = 0, o = 0; i < N; ++i) {
                data[o++] = Math.random() * 2 - 1; // x
                data[o++] = Math.random() * 2 - 1; // y
                data[o++] = 0; // z
                data[o++] = Math.random(); // r
                data[o++] = Math.random(); // g
                data[o++] = Math.random(); // b
                data[o++] = Math.random() * 30 + 10; // size
            }
            /* ---------- 创建并填充 VBO ---------- */
            const vbo = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
            gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
            const location = gl.getAttribLocation(prog, "a_position");
            console.log("the location is :", location);
            /* ---------- 按 layout 指定的 location 连接属性 ---------- */
            const stride = (3 + 3 + 1) * 4; // 7 floats
            gl.vertexAttribPointer(0, 3, gl.FLOAT, false, stride, 0); // a_position
            gl.vertexAttribPointer(1, 3, gl.FLOAT, false, stride, 3 * 4); // a_color
            gl.vertexAttribPointer(2, 1, gl.FLOAT, false, stride, 6 * 4); // a_size
            gl.enableVertexAttribArray(0);
            gl.enableVertexAttribArray(1);
            gl.enableVertexAttribArray(2);
            /* ---------- 绘制 ---------- */
            gl.viewport(0, 0, canvas.width, canvas.height);
            gl.clearColor(0, 0, 0, 1);
            gl.clear(gl.COLOR_BUFFER_BIT);
            gl.drawArrays(gl.POINTS, 0, N);
        }
        initWebGL(vs, fs, gl);

    </script>
</body>

</html>